<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中英文转换</title>
  <link rel="stylesheet" href="./lib/css/index.css">
  <link rel="stylesheet" href="./lib/css/myScroll.css">
  <link rel="stylesheet" href="./lib/css/mySwiper.css">
  <link rel="stylesheet" href="./lib/css/mobile.css">
  <link rel="stylesheet" href="./lib/css/ipad.css">
  <link rel="stylesheet" href="./lib/css/pc.css">
  <style>
    [v-cloak] {
      display: none !important;
    }
  </style>
</head>
<script type="importmap">
  {
    "imports": {
      "vue": "./js/vue.mini.js"
    }
  }
</script>

<body>
  <div id="app" v-cloak>
    <div>
      <p>中英文互换</p>
      <button @click="switchLanguage('zh-CN')">中文</button>
      <button @click="switchLanguage('en-US')">English</button>
      <p>{{ messages.welcome }}</p>
      <div>
        <div>
          {{messages.component1?.name.titleBox.title}}
        </div>
        <div>
          <div>
            {{messages.component1?.subtitle}}
            <p>{{messages.component1?.name.titleBox.title2.title}}</p>
          </div>
        </div>
      </div>
    </div>

    <div>
      <p>屏幕方向：{{ orientation }}</p>
    </div>

    <div>
      <p>父子组件通信{{scrollHeight}} </p>
      <input type="text" @input="name=$event.target.value" placeholder="父组件输入框">
      <helloword @anniu="getMsg" :message="name" ref="helloword"></helloword>

      <div>
        <button @click="parentClick">父组件调用子组件的方法</button>
      </div>
    </div>
    --------------------<br />
    <button @click="isShowDrawer">isShowDrawer</button>
    <!-- <my-swiper ref="mySwiper" /> -->
    <!-- 抽屜 -->
    <div class="drawer" ref="drawerContent">
      <div class="drawer-slider">
        <div class="drawer-slider-box" @touchstart="drawerTouchStart" @touchmove="drawerTouchMove" @touchend="drawerTouchEnd">
          <div class="slider"></div>
        </div>
      </div>
      <div class="drawer-scroll">
        <transition name="fade">
          <!-- <my-scroll :scrollw="scrollImgWidth" :isshowswiper="isShowSwiper" v-if="showTitle" /> -->
        </transition>

      </div>
    </div>
    <div class="footer" style="position: fixed;bottom: 0; width: 100%; height: 52px; background-color: #3D3D3DF0;">
    </div>
  </div>

  <script type="module">
    import { createApp } from './utils/vue.mini.js';
    import { homeInit } from "./api/home.js"
    // 模块引入
    import helloword from "./components/HelloWord.js"
    import mySwiper from "./components/mySwiper.js"
    import myScroll from "./components/myScroll.js"

    document.addEventListener('DOMContentLoaded', function () {
      createApp({
        components: {
          mySwiper,
          helloword,
          myScroll,
        },
        data() {
          return {
            name: "111",
            language: 'en-US',
            messages: {},
            orientation: this.getOrientation(),
            isDrawer: true,
            isDragging: false,
            initialTouchY: 0,
            initialHeight: 0,
            moveY: 0,
            scrollHeight: 0,
            scrollImgWidth: 54,
            showTitle: true,
            isShowSwiper:false
          };
        },
        computed: {
          welcomeMessage() {
            console.log(this.messages, `subtitlesubtitle`);

            return this.messages || '';
          },
        },
        methods: {
          drawerTouchStart(event) {
            this.isDragging = true
            this.initialHeight = this.$refs.drawerContent.offsetHeight;
            this.initialTouchY = event.touches[0].clientY;
            console.log(this.initialTouchY, 'this.initialTouchY111111111111')
          },
          drawerTouchMove(event) {
            if (!this.isDragging) return;
            const delta = event.changedTouches[0].clientY - this.initialTouchY;
            this.scrollHeight = this.initialHeight - delta
            // this.scrollImgWidth = this.initialHeight - delta 
            console.log(this.scrollHeight, 'scrollHeight')
            this.$refs.drawerContent.style.height = `${this.scrollHeight}px`;
            this.showTitle = false

          },
          drawerTouchEnd(event) {
            this.isDragging = false
            if (this.scrollHeight > 200 && this.scrollHeight <= 379) {
              this.$refs.drawerContent.style.height = '431px'
              this.scrollImgWidth = 279
              this.isShowSwiper = false
            } else if (this.scrollHeight > 379) {
              console.log('IsShowSwiperIsShowSwiper')
              this.$refs.drawerContent.style.height = '762px'
              this.isShowSwiper = true
            } else if (this.scrollHeight < 200) {
              this.$refs.drawerContent.style.height = '216px'
              this.scrollImgWidth = 54
              this.isShowSwiper = false
            }
            this.$refs.drawerContent.style.transition = 'all 0.3s linear'
            this.showTitle = true

          },
          isShowDrawer() {
            this.isDrawer = true
          },
          async switchLanguage(lang) {
            if (this.language === lang) return;

            this.language = lang;
            await this.loadMessages(lang);
          },
          async loadMessages(lang) {
            try {
              const response = await fetch(`/lib/json/lang-${lang}.json?v=${new Date().getTime()}`);
              const data = await response.json();
              console.log(data, `datadata`);

              this.messages = data;
            } catch (error) {
              console.log(error);
            }
          },


          getOrientation() {
            return window.innerWidth > window.innerHeight ? '横屏2' : '竖屏2';
          },
          handleResize() {
            this.orientation = this.getOrientation();
          },

          /**
           * 接受子组件的入参
           */
          getMsg(e) {
            console.log(`接受子组件的入参:`, e);
          },
          /**
           * 父组件调用子组件的方法
           */
          async parentClick() {
            homeInit()
            return;
            try {
              const response = await fetch(`https://res.moncler.cn/morefun/genius/floor.json`, { mode: 'no-cors' });
              console.log(response, `response`);

              const data = await response.json();
              console.log(data, `data`);



            } catch (error) {
              console.log(error);
            }



            return
            this.$refs.helloword.anniu('父组件调用子组件的方法');
          },

        },
        async mounted() {

          alert("屏幕分辨率的高：" + window.screen.height + `---屏幕可用工作区高度：` + screen.availHeight + "---浏览器窗口可视高度：" + window.innerHeight)

          await this.loadMessages(this.language);
          // 监听窗口大小变化
          window.addEventListener('resize', this.handleResize);
        },
      }).mount('#app')
    })
  </script>
</body>

</html>